<template>
  <!-----------------订单信息------------------>
  <view class="all">
    <hea :title="title"></hea>
    <div style="font-size: 20px; padding: 15px; color: grey">送达时间</div>
    <div
      style="
        width: 100%;
        height: 180px;
        background-color: white;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
      "
    >
      <div
      :class="cur==index?'timeArr_act':'timeArr_'"
        v-for="(item, index) in timeArr"
      >
        <div @click="bitTime(item,index)" >{{ item }}</div>
      </div>
    </div>
    <div style="font-size: 20px; padding: 15px; color: grey">收货地址</div>
    <div style="width: 100%; background-color: white; display: flex" v-if="dizhi.length>0">
      <div style="margin-left: 10px; width: 90%;line-height: 50px; font-size: 20px">
       {{ dizhi }}
      </div>
      <u-icon name="map" size="20px"></u-icon>
    </div>
    <div style="width: 100%; background-color: white;display: flex;" v-else>
      <div style="margin-left: 10px;width: 90%; line-height: 50px; font-size: 20px;color: grey;">
       请输入收货地址
      </div>
     <u-icon name="arrow-right" size="20px" style="margin-right: 10px"></u-icon>
    </div>
    <div style="font-size: 20px; padding: 15px; color: grey">支付方式</div>
    <div
      style="
        width: 100%;
        height: 180px;
        background-color: white;
        display: flex;
        justify-content: space-around;
      "
    >
      <div>
        <img
          src="../../static/img/微信.png"
          style="width: 80px; height: 80px; margin-top: 20px"
        />
        <u-radio-group
          size="20px"
          v-model="radiovalue1"
          placement="column"
          @change="groupChange"
        >
          <u-radio
            labelSize="20px"
            :customStyle="{ marginBottom: '8px' }"
            :label="radiolist1[0].name"
            :name="radiolist1[0].name"
            @change="radioChange"
          >
          </u-radio>
        </u-radio-group>
      </div>
      <div>
        <img
          src="../../static/img/支付宝.png"
          style="width: 80px; height: 80px; margin-top: 20px"
        />
        <u-radio-group
          v-model="radiovalue1"
          placement="column"
          @change="groupChange"
          size="20px"
        >
          <u-radio
            labelSize="20px"
            :label="radiolist1[1].name"
            :name="radiolist1[1].name"
            @change="radioChange"
          >
          </u-radio>
        </u-radio-group>
      </div>
    </div>
    <div class="foot" v-if="dizhi.length<0">
      <div
        style="
          width:75%;
          color: orange;
          font-size: 24px;
          line-height: 65px;
          margin-left: 20px;
        "
      >
        ￥16.00
      </div>
      
      <div 
        style="
          width: 25%;
          height: 65px;
          background-color: rgb(239, 220, 184);
          font-size: 24px;
          color: white;
          text-align: center;
          line-height: 65px;
        "
      >
        提交
      </div>
    </div>
    <div class="foot" v-else>
      <div
        style="
          width: 20%;
          color: orange;
          font-size: 24px;
          line-height: 65px;
          margin-left: 20px;
        "
      >
        ￥16.00
      </div>
      <div
        style="
          width: 50%;
          font-size: 16px;
          line-height: 65px;
          margin-left: 20px;
        "
      >
        (消耗 10积分)
      </div>
      <div 
        style="
          width: 25%;
          height: 65px;
          background-color: orange;
          font-size: 24px;
          color: white;
          text-align: center;
          line-height: 65px;
        "
      >
        提交
      </div>
     
    </div>
  </view>
</template>
<script>
import hea from "../../components/hea.vue";
export default {
  components: {
    hea,
  },

  data() {
    return {
      cur:0,
      radiolist1: [
        {
          name: "微信",
          disabled: false,
        },
        {
          name: "支付宝",
          disabled: false,
        },
      ],
      radiovalue1: "微信",
      title: "订单信息",
      value: "2",
      timeArr: ["11:00", "12:00", "12:30", "16:30", "17:00", "17:30"],
      dizhi: '山东省济南市历程大区济南大学7楼'
    };
  },
  methods: {
    // 点击选择时间
    bitTime(time,ind) {
      this.cur = ind;
      console.log(time);
    },
    groupChange(n) {
      console.log("groupChange", n);
    },
    radioChange(n) {
      console.log("radioChange", n);
    },

    orderMsg() {
      uni.navigateTo({
        url: "/pages/center/nickname",
      });
    },
  },
  onShow() {},
};
</script>

<style scoped>
.all {
  width: 100vw;
  height: 100vh;
  background: #f2f2f2;
}
.box1 {
  width: 100%;
  height: 50px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(206, 206, 206);
}
.u-radio[data-v-643b3322] {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  flex-direction: row;
  align-items: center;
  margin-top: 5px;
}
.foot {
  width: 100%;
  height: 65px;
  border-top: 1px solid orange;
  position: fixed;
  bottom: 0;
  background-color: #f7f7f7;
  display: flex;
}
.timeArr_act,.timeArr_{
  width: 30%;
          height: 80px;
          border: 1px solid grey;
          margin-top: 5px;
          text-align: center;
          line-height: 80px;
          border-radius: 5px;
}
.timeArr_act{
  border-color: orange;
  color: orange;
}
</style>
